<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script type="text/javascript" type='module' charset="UTF-8" src="/js/collection.js"></script>
</head>
<body>
    <div id="app">
        <div class="home">
            <div class="home-top">
                    <el-row :gutter="12">
                        <template v-for="item in homeTopList" :key="item.id">
                            <el-col :span="6" >
                                <el-card> 
                                    <div class="home-top-content">
                                        <div>
                                            <h3>{{item.count}}</h3>
                                            <span> {{item.title}}</span>
                                        </div>
                                       <div class="home-top-content-icon" >
                                        <el-icon :size="40" style="vertical-align: middle" >
                                            <component :is="item.icon" />
                                        </el-icon>
                                       </div>
                                    </div>
                                </el-card>
                              </el-col>
                        </template>
                    </el-row>
            </div>
            <div class="home-title">
                <h2>
                    数据同步统计
                </h2>
                <div>
                    <el-button-group>
                        <el-button type="primary" label="全部">全部</el-button>
                        <el-button label="本周">本周</el-button>
                        <el-button label="本月">本月</el-button>
                      </el-button-group>
                </div>
            </div>
            <div class="home-statistics">
                <el-row :gutter="12">
                    <!-- <el-col :span="6" >
                            <el-card id="home-statistics-line-one" class="line-content">
                            </el-card>
                      </el-col> -->
                      <el-col :span="8" >
                        <el-card  id="home-statistics-line-two" class="line-content">
                        </el-card>
                  </el-col>
                  <el-col :span="8" >
                    <el-card  id="home-statistics-line-three"  class="line-content">
                    </el-card>
              </el-col>
              <el-col :span="8" >
                <el-card  id="home-statistics-line-four"  class="line-content">
                </el-card>
            </el-col>
                </el-row>
            </div>
            <div class="home-title" >
                <h2>
                    数据同步日志
                </h2>
            </div>
            <div class="home-log" ref="logRef">
                <el-scrollbar :height="height">
                    <p v-for="(item, index) in logTableData" :key="index">{{ item.content}}</p>
                </el-scrollbar>
            </div>
        </div>
    </div>
</body>
<script type="module" setup>
  const { createApp, ref, reactive, onMounted} = Vue
 const app = createApp({
    setup() {
    let height = ref(null)
    const logRef = ref(null)
    const homeTopList = ref([
      { 
             title:'监管单位数',
             id:0,
             count:222,
             icon:'edit'
        },
        { 
             title:'银行接入数',
             id:1,
             count:222,
             icon:'edit'
        },
        { 
            title:'上传账户数',
             id:2,
             count:222,
             icon:'edit'
        },
        {
            title:'上传流水数',
            id:3,
            count:222,
            icon:'edit'
        }
    ]);
    const logTableData = ref([
{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
},
{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
},
{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
},
{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
},
{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
},{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
},{
    content:"2023-11-10 08:30:20  000000 桂林银行总行 请求3001单位下发接口 操作成功，获取单位数量100条"
}
    ])
const loadEchartLineData = (lineId,title) => {    
var chartDom = document.getElementById(lineId);
var myChart = echarts.init(chartDom);
var option;
option = {
  title: {
    text: title,
    left: 'center',
    top: '10px'
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};
option && myChart.setOption(option);
}

const  calculatedLogHeight = ()=>{
        const top =  logRef.value.getBoundingClientRect().top
        const screenH =  document.body.clientHeight
        let logHeight = (screenH - top)  + 'px'
        height.value = logHeight
}

onMounted(()=>{
        calculatedLogHeight()
        // loadEchartLineData('home-statistics-line-one','下发单位数量统计')
        loadEchartLineData('home-statistics-line-two','银行接入数量统计')
        loadEchartLineData('home-statistics-line-three','接收账户数量统计')
        loadEchartLineData('home-statistics-line-four','接收流水数量统计')
})    
      return {
        homeTopList,
        logTableData,
        logRef,
        height
      }},
  })
app.component('edit',ElementPlusIconsVue.Edit)
app.use(ElementPlus);
app.mount('#app');
</script>
<style>
    .home {
        margin: 15px 15px;
    }
    .home-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.home-top-content-icon {
    background-color: aquamarine;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    line-height: 80px;
    text-align: center;
}
.home-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.line-content {
    width: 100%;
    height: 300px;
}
</style>
</html>
